<template>
    <div class="container">
        <m-header>支付详情</m-header>
        <div class="main">
            <div class="info-wrap" v-for="(ite,ind) in groupList" :key="ind">
                <div class="title">{{ite.title}}</div>
                <div class="content">
                    <div class="cell" v-for="(item,index) in ite.field" :key="index">
                        <m-form
                                :field="item"
                                :value="value[item.field_id]"
                                :disabled="item.disabled"
                        >
                            <template #value>
                                <template v-if="item.field_id === 'is_pay_off'">
                                    <div style="text-align: right;width: 100%;">{{value[item.field_id] ? '是': '否'}}</div>

                                </template>
                            </template>
                        </m-form>
                    </div>
                </div>
            </div>

        </div>



    </div>
</template>

<script>
  import form from '@/components/form/form'
  import agreement from '@/components/agreement/agreement'
  import dialog from '@/utils/dialog'
  import {getAfterPaymentDetail,editOrder,unifiedorder,applyRefund, getParameter,unLockTicket} from "../../request/api";
  import {crtTimeFtt} from "../../utils/utils";
  import {preventReClick} from "../../utils/plugins";
  import {setToken} from "../../utils/cache";
  import {Popup,ImagePreview} from 'vant'
  import QRCode from 'qrcodejs2'

  export default {
    name: "paidDetail",
    components: {
      "m-form": form,
      // "m-agreement": agreement,
      // [Popup.name]: Popup,
      // [ImagePreview.Component.name]: ImagePreview.Component
    },
    computed: {
      isRefund(){
        let {Order_status, effective_time_end,Order_refund_time} = this.value;
        let nowTime = new Date().getTime(),
          endTime = effective_time_end && new Date(crtTimeFtt(effective_time_end,'YYYY/MM/DD HH:mm:ss')).getTime()

        return Order_status === '已支付' && endTime > nowTime && !Order_refund_time
      },

    },
    watch:{
      ['$route']: {
        handler(val){
          if (val.path === '/paidDetail'){
            let query = val.query,
              {token,id,shuttle} = query;
            //微信信息通知推送，带有token的，保存token后重载，清除带有token的地址参数
            if (token){
              setToken(token);
              let dir = process.env.NODE_ENV === 'development' ? process.env.VUE_APP_SECONDDIR : window.webConfig.webSecondDir
              location.replace(`${dir}paidDetail?id=${id || ''}`);
              return
            }
            id && this.getOrder(id);
          }
        },immediate: true
      }
    },

    data() {
      return {
        groupList: [
          {
            title:  '支付信息',
            field:[
              {
                label: '订单编号',
                type: 'text',
                field_id: 'out_trade_no',
                disabled: true
              },
              {
                label: '学生姓名',
                type: 'text',
                field_id: 'passengers_name',
                disabled: true
              },
              {
                label: '考号',
                type: 'text',
                field_id: 'identification_no',
                disabled: true
              },
              {
                label: '学校名称',
                type: 'text',
                field_id: 'school_name',
                disabled: true
              },
              {
                label: '套票标签',
                type: 'text',
                field_id: 'packag_label_name',
                disabled: true
              },
              {
                label: '班别',
                type: 'text',
                field_id: 'class_',
                disabled: true
              },
              {
                label: '学生学号',
                type: 'text',
                field_id: 'student_id',
                disabled: true
              },
              {
                label: '车费所属期',
                type: 'text',
                field_id: 'fare_period',
                disabled: true
              },
              {
                label: '服务时间',
                type: 'text',
                field_id: 'service_time',
                disabled: true
              },
              {
                label: '支付时间',
                type: 'text',
                field_id: 'success_time',
                disabled: true,
              },
              {
                label: '应收校车费',
                type: 'text',
                field_id: 'original_price',
                disabled: true,
              },
              {
                label: '实收校车费',
                type: 'text',
                field_id: 'cost',
                disabled: true,
              },
              {
                label: '支付金额',
                type: 'text',
                field_id: 'paid_amount',
                disabled: true,
              },
              {
                label: '未缴金额',
                type: 'text',
                field_id: 'unpaid_amount',
                disabled: true,
              },
              {
                label: '支付人名',
                type: 'text',
                field_id: 'payer_name',
                disabled: true,
              },
              {
                label: '支付人编号',
                type: 'text',
                field_id: 'payer_no',
                disabled: true,
              },
              {
                label: '已付清标识',
                type: 'text',
                field_id: 'is_pay_off',
                disabled: true,
                valueSlot:true
              },
              {
                label: '摘要',
                type: 'text',
                field_id: 'abstract_',
                disabled: true,
              },

            ]
          },
        ],
        value: {},

      }
    },
    methods: {
      getOrder(id){
        this.$Loading();
        getAfterPaymentDetail(id).then(res => {
          if (res.errcode !== 0)return;
          this.$toast.clear();
          let data = res.row[0] || {};
          this.value = data;
        })
      },
    },
  }
</script>

<style scoped lang="less">

    .main{
        padding: 10px;
        overflow: auto;
        .info-wrap{
            margin-bottom: 10px;
            .cell{
                position: relative;
                display: flex;
                align-items: center;
                .label{
                    font-size: 15px;
                    color: #999;
                }
                .value{
                    flex: 1;
                    width: 0;
                    & > img{
                        width: 100%;
                    }
                }
                .mask{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    z-index: 100;
                    top: 0;
                    left: 0;
                }
                .status{
                    text-align: right;
                    font-size: 15px;
                    width: 100%;
                }
                .blue{
                    color: #1989fa;
                }
                .green{
                    color: #24C373;
                }
                .red{
                    color: #FF1313;
                }
                .yellow{
                    color: #ffd11b;
                }
                .orange{
                    color: #FF7913;
                }
                .grey{
                    color: #B3B3B3;
                }
            }

        }
    }
    .footer{
        padding: 10px;
        .btn{
            width: 100%;
            & +.btn{
                margin-left: 10px;

            }
        }
    }

    .popup-wrap{
        width: 80vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        /*height: 571px;*/

        .title{
            padding: 15px 15px 10px;
            color: #333333;
            font-size: 17px;
            font-weight: bold;
        }
        .content{
            flex: 1;
            height: 0;
            overflow: auto;
            padding: 0 15px 15px;
            color: #333333;
            font-size: 15px;
            width: 100%;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            align-items: center;

            p{
                margin: 0;
            }
            .bold{
                font-weight: bold;
            }
            .pic{
                width: 85%;
                & >img{
                    width: 100%;
                }
            }
            .qrcode{
                width: fit-content;
            }
            .fx{
                display: flex;
                width: 100%;
            }
            .cell{
                padding-top: 10px;
                width: 100%;
                display: flex;
                .label{
                }
                .value{
                    flex: 1;
                }
            }
        }
    }

</style>
